<template>
  <div v-if="nodeType === 'HttpV1'" class="http-config">
    <div class="config-item">
      <label class="config-label">请求方法</label>
      <a-select
        :value="httpConfig.method"
        placeholder="请选择请求方法"
        style="width: 100%"
        size="small"
        @change="onMethodChange"
      >
        <a-select-option value="GET">GET</a-select-option>
        <a-select-option value="POST">POST</a-select-option>
        <a-select-option value="PUT">PUT</a-select-option>
        <a-select-option value="DELETE">DELETE</a-select-option>
        <a-select-option value="PATCH">PATCH</a-select-option>
      </a-select>
    </div>
    
    <div class="config-item">
      <label class="config-label">请求URL</label>
      <VariableRichTextEditor
        :value="httpConfig.url"
        placeholder="https://api.example.com/endpoint"
        :availableVariables="availableVariables"
        :inputVariables="inputVariables"
        @input="onUrlChange"
      />
    </div>
    
    <div class="config-item">
      <label class="config-label">连接超时 (秒)</label>
      <a-input-number
        :value="httpConfig.connectionTimeout"
        placeholder="15"
        :min="1"
        :max="300"
        size="small"
        style="width: 100%"
        @change="onConnectionTimeoutChange"
      />
    </div>
    
    <div class="config-item">
      <label class="config-label">读取超时 (秒)</label>
      <a-input-number
        :value="httpConfig.readTimeout"
        placeholder="15"
        :min="1"
        :max="300"
        size="small"
        style="width: 100%"
        @change="onReadTimeoutChange"
      />
    </div>
    
    <div class="config-item">
      <label class="config-label">请求头</label>
      <div class="headers-container">
        <div 
          v-for="(header, index) in httpConfig.headers" 
          :key="index" 
          class="header-row"
        >
          <a-input
            :value="header.name"
            placeholder="Header名称"
            size="small"
            style="width: 40%"
            @input="onHeaderNameChange(index, $event.target.value)"
          />
          <VariableRichTextEditor
            :value="header.value"
            placeholder="Header值"
            :availableVariables="availableVariables"
            :inputVariables="inputVariables"
            style="width: 40%"
            @input="onHeaderValueChange(index, $event)"
          />
          <a-button 
            size="small" 
            type="danger" 
            @click="removeHeader(index)"
            icon="delete"
            style="width: 20%"
          />
        </div>
        <a-button size="small" @click="addHeader" type="dashed" style="width: 100%">
          <a-icon type="plus" />
          添加请求头
        </a-button>
      </div>
    </div>
    
    <div class="config-item" v-if="httpConfig.method !== 'GET'">
      <label class="config-label">请求体</label>
      <a-tabs 
        size="small" 
        :activeKey="httpConfig.activeTab || 'json'"
        @change="onTabChange"
      >
        <a-tab-pane key="json" tab="JSON">
          <VariableRichTextEditor
            :value="httpConfig.body"
            placeholder='{"key": "value"}'
            :availableVariables="availableVariables"
            :inputVariables="inputVariables"
            :multiline="true"
            style="width: 100%;"
            @input="onBodyChange"
          />
        </a-tab-pane>
        <a-tab-pane key="form" tab="Form Data">
          <div class="form-data-container">
            <div 
              v-for="(field, index) in httpConfig.formData" 
              :key="index" 
              class="form-row"
            >
              <a-input
                :value="field.name"
                placeholder="字段名"
                size="small"
                style="width: 40%"
                @input="onFormFieldNameChange(index, $event.target.value)"
              />
              <VariableRichTextEditor
                :value="field.value"
                placeholder="字段值"
                :availableVariables="availableVariables"
                :inputVariables="inputVariables"
                style="width: 40%"
                @input="onFormFieldValueChange(index, $event)"
              />
              <a-button 
                size="small" 
                type="danger" 
                @click="removeFormField(index)"
                icon="delete"
                style="width: 20%"
              />
            </div>
            <a-button size="small" @click="addFormField" type="dashed" style="width: 100%">
              <a-icon type="plus" />
              添加表单字段
            </a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import VariableRichTextEditor from './VariableRichTextEditor.vue'

export default {
  name: 'HttpConfigSection',
  components: {
    VariableRichTextEditor
  },
  props: {
    nodeType: {
      type: String,
      default: ''
    },
    httpConfig: {
      type: Object,
      default: () => ({
        method: 'GET',
        url: '',
        headers: [],
        body: '',
        formData: [],
        activeTab: 'json',
        connectionTimeout: 15,
        readTimeout: 15
      })
    },
    availableVariables: {
      type: Array,
      default: () => []
    },
    inputVariables: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onMethodChange(value) {
      this.$emit('update:httpConfig', { ...this.httpConfig, method: value })
    },
    
    onUrlChange(value) {
      this.$emit('update:httpConfig', { ...this.httpConfig, url: value })
    },
    
    onConnectionTimeoutChange(value) {
      this.$emit('update:httpConfig', { ...this.httpConfig, connectionTimeout: value })
    },
    
    onReadTimeoutChange(value) {
      this.$emit('update:httpConfig', { ...this.httpConfig, readTimeout: value })
    },
    
    onBodyChange(value) {
      this.$emit('update:httpConfig', { ...this.httpConfig, body: value })
    },
    
    onHeaderNameChange(index, value) {
      const newHeaders = [...this.httpConfig.headers]
      newHeaders[index] = { ...newHeaders[index], name: value }
      this.$emit('update:httpConfig', { ...this.httpConfig, headers: newHeaders })
    },
    
    onHeaderValueChange(index, value) {
      const newHeaders = [...this.httpConfig.headers]
      newHeaders[index] = { ...newHeaders[index], value: value }
      this.$emit('update:httpConfig', { ...this.httpConfig, headers: newHeaders })
    },
    
    onFormFieldNameChange(index, value) {
      const newFormData = [...this.httpConfig.formData]
      newFormData[index] = { ...newFormData[index], name: value }
      this.$emit('update:httpConfig', { 
        ...this.httpConfig, 
        formData: newFormData,
        method: this.httpConfig.method // 确保保持method不变
      })
    },
    
    onFormFieldValueChange(index, value) {
      const newFormData = [...this.httpConfig.formData]
      newFormData[index] = { ...newFormData[index], value: value }
      this.$emit('update:httpConfig', { 
        ...this.httpConfig, 
        formData: newFormData,
        method: this.httpConfig.method // 确保保持method不变
      })
    },
    
    addHeader() {
      const newHttpConfig = {
        ...this.httpConfig,
        headers: [...this.httpConfig.headers, { name: '', value: '' }]
      }
      this.$emit('update:httpConfig', newHttpConfig)
    },
    
    removeHeader(index) {
      const newHttpConfig = {
        ...this.httpConfig,
        headers: this.httpConfig.headers.filter((_, i) => i !== index)
      }
      this.$emit('update:httpConfig', newHttpConfig)
    },
    
    addFormField() {
      const newHttpConfig = {
        ...this.httpConfig,
        formData: [...this.httpConfig.formData, { name: '', value: '' }]
      }
      this.$emit('update:httpConfig', newHttpConfig)
    },
    
    removeFormField(index) {
      const newHttpConfig = {
        ...this.httpConfig,
        formData: this.httpConfig.formData.filter((_, i) => i !== index)
      }
      this.$emit('update:httpConfig', newHttpConfig)
    },

    onTabChange(key) {
      this.$emit('update:httpConfig', { ...this.httpConfig, activeTab: key })
    }
  }
}
</script>

<style scoped>
/* HTTP配置样式 */
.http-config {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
}

.config-item {
  margin-bottom: 8px;
}

.config-item:last-child {
  margin-bottom: 0;
}

.config-label {
  display: block;
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}



/* 请求头样式 */
.headers-container {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 8px;
  background: #fafafa;
}

.header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.header-row:last-child {
  margin-bottom: 0;
}

/* 表单数据样式 */
.form-data-container {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 8px;
  background: #fafafa;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-row:last-child {
  margin-bottom: 0;
}
</style>
